<template>
	<view>
		<!-- 手机状态栏高度 -->
		<view class="dhl"></view>
		<!-- 顶部背景 -->

		<!-- 顶部搜索框 -->
		<view class="search dis_f_l_c">
			<image class="left_icon" src="../../static/index/location.png" mode=""></image>
			<view class="c_name">{{city}}</view>
			<view class="search_input dis_f_c_c box">
				<image src="../../static/icon/search.png" mode=""></image>
				<u-input v-model="search_text" height="32" @input='aa'></u-input>
			</view>
		</view>
		<view class="content">
			<view class="top_bg">
				<image src="../../static/index/indexbg.png" mode="aspectFill"></image>
			</view>
			<!-- <previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="imgs" @longPress="longPress">
			</previewImage> -->
			<view class="banner">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" indicator-color="rgba(255,255,255,.3)"
					indicator-active-color="#FFFFFF">
					<swiper-item v-for="(item,index) in banner">
						<image :src="item" mode="aspectFill" style="width: 100%;height: 280rpx;"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="btn dis_f_sb_c">
				<view class="button dis_f_co_c_c" v-for="(item,index) in cate" @click="go_part1(item.id)">
					<image :src="item.pic" mode=""></image>
					<view>{{item.name}}</view>
				</view>
			</view>

			<!-- <view class="gonggao">
				<u-notice-bar mode="horizontal" :is-circular="true" :list="lists"></u-notice-bar>
			</view> -->
			<view class="d_p_n">

				<view class="guang_gao" v-for="(item,index) in list" @click="go_xq(item)">
					<view class="top_img dis_f_sb_c" @click.stop="go_list">
						<view>
							<image class="img1" src="../../static/index/gg1.png" @click.stop="jumps(1)" mode=""></image>
							<image class="img2" src="../../static/index/gg2.png" @click.stop="jumps(2)" mode=""></image>
						</view>
						<view class="dis_f_l_c right_text">
							<view style="margin-right: 6rpx;">查看更多</view>
							<image src="../../static/index/right.png" mode=""></image>
						</view>
					</view>
					<view class="info_part dis_f_sb_c">
						<view class="dis_f_l_c">
							<image class="tx" :src="item.user.avatar" mode=""></image>
							<view class="dis_f_co_l_c">
								<view class="title">{{item.user.name}}</view>
								<view class="dis_f_l_c">
									<image v-if="item.istop == 1"
										style="margin-right: 12rpx;height: 36rpx;width: 96rpx;"
										src="../../static/icon/zhiding.gif" mode=""></image>
									<image v-if="item.is_refresh == 1"
										style="margin-right: 12rpx;height: 36rpx;width: 96rpx;"
										src="../../static/icon/shuaxin.gif" mode=""></image>
									<image v-if="item.isred == 1"
										style="margin-right: 12rpx;height: 36rpx;width: 96rpx;"
										src="../../static/icon/hongbao.gif" mode=""></image>
									<image v-if="item.user.isvip >= 1"
										style="margin-right: 12rpx;height: 36rpx;width: 96rpx;"
										src="../../static/icon/vip.gif" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="gg_title hh slh_three">
						{{item.content}}
					</view>
					<view class="gg_img dis_f_l_c dis_f_w">
						<!-- <view v-if="item.picnum >4" class="img_more dis_f_co_c_c">
							查<br>看<br>更<br>多<br></view> -->
						
						<image v-for="(img, i) in item.pic" :key="i" :src="img" :data-src="img"
							@click.stop="previewOpen(item,img)"></image>

					</view>

					<view class="b_btn dis_f_l_c">
						<view class="dis_f_l_c" style="margin-right: 60rpx;">
							<image style="width: 33.97rpx;height: 24.75rpx;" src="../../static/index/s_btn1.png"
								mode=""></image>
							<view>{{item.visit}}</view>
						</view>
						<view class="dis_f_l_c" style="margin-right: 60rpx;">
							<image style="width: 32.74rpx;height: 32.88rpx;" src="../../static/index/s_btn2.png"
								mode=""></image>
							<view>{{item.talknum}}</view>
						</view>
						<view class="dis_f_l_c" style="margin-right: 60rpx;" @click.stop="share(index)">
							<image style="width: 32.33rpx;height: 32.33rpx;" src="../../static/index/s_btn3.png"
								mode=""></image>
							<view>分享</view>
						</view>
						<view class="dis_f_l_c" style="margin-right: 60rpx;" @click.stop="love(item.id,index)">
							<image v-if="item.islove" style="width: 34rpx;height: 29.56rpx;"
								src="../../static/index/hx.png" mode="">
							</image>
							<image v-else style="width: 34rpx;height: 29.56rpx;" src="../../static/index/s_btn4.png"
								mode="">
							</image>

							<view>{{item.love}}</view>
						</view>
					</view>

					<view class="more">
						<image src="../../static/index/more.png" mode=""></image>
					</view>
				</view>
				<view>
					<u-loadmore  :status="status" />
				</view>
			</view>
		</view>
		<u-modal title="公告" v-model="gg_show" :content="gg_modal"></u-modal>
	</view>
</template>

<script>
	// import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
	export default {
		// components: {
		// 	previewImage
		// }, //注册插件 //注册插件
		data() {
			return {
				city: '',
				page: 1,
				search_text: '',
				status: 'loadmore',
				banner: [
				
				],

				ck_more: true,
				cate: [],
				list: [],
				lists: [
					'站点公告站点公告站点公告站点公告站点公告站点公告站点公告站点公告站点公告站点公告站点公告'
				],
				zys: '',
				hot: 1,
				login_tip: '',
				ssq: '',
				more:false,
				gg_show:false,
				gg_id:'',
				gg_modal:'',
				user:[]
			}
		},
		onLoad() {
			this.list = [];
			this.get_announce();
			this.get_location();
			this.get_announce();
			this.get_index();
			this.get_guang();
			this.get_cate();
			
		},
		onShow() {
			this.$.ajax(1, 'post', 'index/getuser', {
				uid:uni.getStorageSync('uid'),
				token:uni.getStorageSync('token')
			}, (res) => {
				console.log(res)
				if(res.code == 1){
				this.user = res.userinfo
					if(res.userinfo.mobile == res.userinfo.name){
						this.$.open('/pages/mine/she_zhi')
						this.$.ti_shi('请设置您的昵称不能与手机号相同，防止您个人信息泄露')
					}
				}
				
			})
			// this.list = [];
			// this.page = 1;
			// this.get_announce();
			this.get_location();
			this.set_cid();
			// this.get_announce();
			// this.get_index();
			// this.get_guang();
			
			
			
		},
		methods: {
			set_cid(){
				this.$.ajax(1,"POST","index/set_cid",{
					uid:uni.getStorageSync('uid'),
					cid: uni.getStorageSync('cid').clientid,
				},(res)=>{
					console.log(uni.getStorageSync('cid').clientid);
					console.log('cid bangding');
				})
			},
			get_announce(){
				this.$.ajax(1,"POST","index/get_notice",{
					uid:uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
				},(res)=>{
					if(res.code ==1){
						this.gg_show = res.data.is_show
						this.gg_id = res.data.id
						this.gg_modal = res.data.content
						this.set_announce()
					}
				})
			},
			set_announce(){
				this.$.ajax(1,"POST","index/set_notice",{
					uid:uni.getStorageSync('uid'),
					id:this.gg_id
				},(res)=>{
					if(res.code ==1){
						
					}
				})
			},
			get_index() {
				console.log(this.ssq.province + ',' + this.ssq.city + ',' + this.ssq.district)
				this.$.ajax(1, 'post', 'index/getindex', {
					city: this.ssq.province + ',' + this.ssq.city + ',' + this.ssq.district
				}, (res) => {
					console.log(res)
					if (res.code == 1) {
						this.lists = res.gonggao
						// console.log(this.lists)
						this.banner = res.banner
					} else {
						// this.$.ti_shi(res.msg)
					}
				})
			},
			get_guang() {
				
				this.$.ajax(1, 'post', 'index/getguang', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
					status: 1,
					page: this.page,
					hot: this.hot
				}, (res) => {
					// console.log(res.list[0].user)
					if (res.code == 1) {
						// this.list = res.list
						this.zys = res.pagecount
						if (res.list != '') {
							
							res.list.forEach((item, index) => {
								this.list.push(item);
							})
							// console.log(this.lists)
							
						} else {
							this.status = 'nomore'
						}
					}

				})
				
				
			},
			get_cate() {
				this.$.ajax(1, 'post', 'index/guangcate', {}, (res) => {
					console.log(res)
					if (res.code == 1) {
						this.cate = res.data
					}

				})
			},
			share(e) {
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if (res.code == 9) {
						this.$.ti_shi(res.msg)
						uni.clearStorageSync()
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}, 1000)
						return;
					} else {
						uni.share({
							provider: "weixin",
							scene: "WXSceneSession",
							type: 0,
							href: "/pages/guang_gao/guang_gao?id=" + this.list[e].id,
							title: this.list[e].user.name,
							summary: this.list[e].content,
							imageUrl: this.list[e].pic[0],
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						})
					}
				})
			},

			love(e, index) {
				this.$.ajax(1, 'post', 'index/getguanglove', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
					id: e
				}, (res) => {
					// console.log(res.list[0].user)
					if (res.code == 1) {
						this.list[index].love = this.list[index].love + 1
						this.list[index].islove = 1
						// this.getguang(e)
					} else {
						this.list[index].love = this.list[index].love - 1
						this.list[index].islove = 0
						// this.getguang(e)
					}

				})

			},
			jumps(e) {
				this.hot = e
				this.page = 1
				this.get_guang();
			},
			//打开预览e
			previewOpen(e, img) {
				// console.log(this.$refs.previewImage);
				this.$.look_img(img, e.pic)

			},
			go_part1(e) {

				this.$.open('/pages/guang_gao/gg_list?cate=' + e)


			},
			confirm() {
				this.$.open('/pages/login/login')
			},
			// 获取当前地理位置
			get_location() {
				let that = this
				console.log(12121)
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						console.log(res)
						that.city = res.address.city
						uni.setStorageSync('city',that.city)
						that.ssq = res.address
						uni.setStorageSync('district',res.address.district)
					},
					fail: function(res) {
						console.log(res)
					}
				});
			},
			go_xq(e) {


				this.$.open('/pages/guang_gao/guang_gao?id=' + e.id)

			},
			go_list() {
				let e = 0
				this.$.open('/pages/guang_gao/gg_list?hot=' + e)
			},
			aa() {
				this.$.ajax(1, 'post', 'index/getguang', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
					status: 1,
					keywords: this.search_text
				}, (res) => {
					// console.log(res)
					if (res.code == 1) {
						this.list = res.list
					} else {
						this.list = []
					}
				})
			},
		},
		onReachBottom() {
			// var xiabiao = this.current;
			console.log(111)
			if (this.page + 1 <= this.zys) {
				this.status = 'loading';
				this.page = ++this.page;
				console.log(this.page)
				this.get_guang();
			} else {
				this.status = 'nomore';
				return;
			}
		},
		onPullDownRefresh(){
			this.list = []
				this.page = 1
			this.get_guang();
		
			setTimeout(function () {
			            uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style scoped lang="scss">
	.dhl {
		// position: absolute;
		width: 100%;
		height: var(--status-bar-height);
		position: fixed;
		top: 0;
		background-color: #FFDE21;
		z-index: 999;
	}

	// 顶部背景图


	// 顶部搜索框
	.search {
		width: 100%;
		position: fixed;
		top: var(--status-bar-height);
		z-index: 999;
		height: 88rpx;
		padding: 14rpx 48rpx;
		background-color: #FFDE21;

		.left_icon {
			width: 21.71rpx;
			height: 30rpx;
			margin-right: 12rpx;
		}

		.c_name {
			font-size: 26rpx;
			color: #222222;
			line-height: 36rpx;
			margin-right: 48rpx;
		}

		.search_input {
			width: 494rpx;
			height: 60rpx;
			background-color: #fff;
			padding: 14rpx 0 14rpx 30rpx;
			border-radius: 30rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 12rpx;
			}
		}
	}

	.content {
		position: relative;
		width: 100%;
		padding: calc(var(--status-bar-height) + 124rpx) 24rpx 100rpx 24rpx;
		// left: 0;
		z-index: 99;

		.top_bg {
			position: absolute;
			top: calc(var(--status-bar-height) + 88rpx);
			left: 0;
			width: 750rpx;
			height: 378rpx;
			// top: ;
			z-index: -1 !important;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.banner {
			margin-bottom: 36rpx;
			border-radius: 20rpx;

			swiper {
				width: 100%;
				height: 280rpx;
				border-radius: 20rpx;

			}

			// border-radius: 10rpx;
			image {

				border-radius: 20rpx;
			}
		}

		.btn {
			padding: 0 24rpx;
			margin-bottom: 36rpx;

			.button {
				background-color: #fff;
				width: 142rpx;
				border-radius: 20rpx;
				box-shadow: 0rpx 6rpx 24rpx rgba(30, 19, 6, 0.05);
				height: 164rpx;

				image {
					width: 70rpx;
					height: 70rpx;
				}
			}

			.text {
				font-size: 26rpx;
				line-height: 34rpx;
				color: #222222;
			}
		}

		.gonggao {
			width: 702rpx;
			margin-bottom: 44rpx;


		}

		.guang_gao {
			position: relative;
			margin-bottom: 12rpx;
			width: 100%;
			// height: 594rpx;
			background-color: #fff;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			border-radius: 20rpx;
			padding: 36rpx 26rpx;

			.top_img {

				display: none;

			}

			.info_part {
				width: 100%;
				margin-bottom: 18rpx;

				.tx {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					margin-right: 26rpx;
				}

				.title {
					color: #222;
					line-height: 40rpx;
					font-size: 30rpx;
					margin-bottom: 12rpx;
				}

				.gg_btn {
					color: #fff;
					font-size: 26rpx;
					line-height: 16rpx;
					border-radius: 18rpx;

				}
			}

			.gg_title {
				font-size: 26rpx;
				// line-height: 33rpx;
				// height: 33rpx;
				color: #222;
				margin-bottom: 24rpx;
				width: 100%;
			}

			.gg_img {

				width: 100%;
				margin-bottom: 48rpx;

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					margin-right: 12rpx;
					margin-bottom: 12rpx;
				}

				.img_more {
					position: absolute;
					color: #fff;
					height: 150rpx;
					font-size: 24rpx;
					right: 10rpx;
					width: 30rpx;
					background-color: rgba($color: #000000, $alpha: .2);
					border-radius: 0 10rpx 10rpx 0;
				}
			}

			// .gg_img image:last-child {
			// 	border-radius: 10rpx 0 0 10rpx;
			// 	position: relative;

			// }

			.b_btn {
				font-size: 24rpx;
				color: #777;
				line-height: 32rpx;

				image {
					margin-right: 13rpx;
				}
			}

			.more {
				position: absolute;
				top: 36rpx;
				right: 40rpx;

				image {
					width: 32rpx;
					height: 8rpx;
				}
			}
		}

		.d_p_n>.guang_gao:first-child {
			.top_img {
				padding-bottom: 24rpx;
				display: flex !important;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				display: block;
				border-bottom: 2rpx solid #EEEEEE;
				margin-bottom: 36rpx;

				.right_text {
					font-size: 24rpx;
					color: #BBB;
					line-height: 32rpx;

					image {
						width: 8.14rpx;
						height: 13.76rpx;
					}
				}

				.img1 {
					width: 133.34rpx;
					height: 34rpx;
					margin-right: 24rpx;
				}

				.img2 {
					width: 134.76rpx;
					height: 34rpx;
				}
			}

			.more {
				position: absolute;
				top: 126rpx;
				right: 40rpx;

				image {
					width: 32rpx;
					height: 8rpx;
				}
			}

		}

		.d_p_n>.guang_gao:last-child {
			margin-bottom: 120rpx;

		}
	}
</style>
